<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.css" rel="stylesheet">
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.js"></script>
    <script type="text/javascript" src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.js"></script> -->

    <script include="draw,compare" src="./dist/include-mapboxgl.js"></script>
    <script src="./dist/iclient-mapboxgl.js"></script>
    <!-- <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.js"></script> -->
</head>

<body>
    <!-- // 地图显示的div -->
    <div id="map" style="position:absolute;left:0px;right:0px;top:0;bottom: 0;"></div>

    <script>
        var attribution =
            "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";

        var map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles1": {
                        "attribution": attribution,
                        "type": "raster",
                        "tiles": ['https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                        "tileSize": 256,
                        // maxzoom:10
                    }
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles1",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            center: [120.143, 30.236], // 地图初始中心点
            zoom: 3 // 地图初始缩放级别
        });


        // 常用控件

        // 导航
        map.addControl(new mapboxgl.NavigationControl(), "top-left");

        // 比例尺
        map.addControl(new mapboxgl.ScaleControl({}));

        // 全屏
        map.addControl(new mapboxgl.FullscreenControl());

        // 定位
        map.addControl(new mapboxgl.GeolocateControl());


        var Draw = new MapboxDraw();
        map.addControl(Draw, 'top-left');

        // 看到这了
        // https://iclient.supermap.io/web/introduction/mapboxglDevelop.html#drawSymbolsAndGraphs
    </script>
</body>

</html>